add support for themed img #1445
Conversation
|
@josevalim how do you test these types of things locally? I pointed my project to use Is that the way to go? |
|
@yordis you can run |
|
@jonatanklosko yeah, I think I figured it out, it works Screen.Recording.2021-12-06.at.7.06.45.PM.mov |
|
Last-mile, dealing with the Screen.Recording.2021-12-06.at.7.10.10.PM.mov |
assets/less/content/general.less
Outdated
| @@ -165,6 +165,10 @@ img { | |||
| max-width: 100%; | |||
| } | |||
|
|
|||
| img[src*="#gh-dark-mode-only"] { | |||
There was a problem hiding this comment.
Alternatively we could do:
body:not(.night-mode) img[src*="#gh-dark-mode-only"] {
display: none;
}
This way we don't need to explicitly do display: inline to revert this, which is good because the image may potentially have different display.
Maybe it would make sense to have both of these together as body:not(.night-mode) img and body.night-mode img in a single file?
There was a problem hiding this comment.
Maybe it would make sense to have both of these together as body:not(.night-mode) img and body.night-mode img in a single file?
I am following the existing pattern. What would you propose? Dont have any preference.
Worth noting that this is only inside the .content-inner
|
For EPUB we should always hide the dark mode one. |
|
@josevalim is there a CSS or something? Sorry, I actually don't know how to do that, I googled about it, but I am getting lost the more I click links. |
|
@yordis there are separate styles for EPUB in |
|
Thank you all (specially you @jonatanklosko ❤️ ) ready to CR |
| @@ -13,3 +13,7 @@ | |||
| @import './content/footer'; | |||
| @import './content/bottom-actions.less'; | |||
| } | |||
|
|
|||
| body:not(.night-mode) .content-inner img[src*="#gh-dark-mode-only"] { | |||
There was a problem hiding this comment.
Actually now I wonder if we can do it in general.less with a fancy selector like body:not(.night-mode) & img[src*="#gh-dark-mode-only"], but either is fine ^^
|
💚 💙 💜 💛 ❤️ |
closes #1405